<!-- 消费项管理 -->
<template>
  <div id="ConsumptionSetting">
    <div class="content">
      <div class="overflow-auto">
        <!-- 右 -->
        <div class="table_body">
          <div class="top_btn">
            <el-button type="primary" @click="open_dialogVisible">新增消费项</el-button>
          </div>
          <div class="table">
            <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#F7F8FB' }"
              :row-class-name="tableRowClassName">
              <el-table-column prop="id" label="分类" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.type_id == '1'">早餐消费</div>
                  <div v-if="scope.row.type_id == '2'">客房消费</div>
                  <div v-if="scope.row.type_id == '3'">赔偿</div>
                  <div v-if="scope.row.type_id == '4'">其他</div>
                  <div v-if="scope.row.type_id == '5'">佣金</div>
                  <div v-if="scope.row.type_id == '6'">支出</div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="消费项名称" align="center">
              </el-table-column>
              <el-table-column prop="price" label="价格" align="center">
              </el-table-column>
              <el-table-column prop="status" label="状态" align="center">
                <el-switch slot-scope="scope" @change="status(scope.row)" v-model="scope.row.status">
                </el-switch>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                  <el-divider direction="vertical"></el-divider>
                  <el-button type="text" style="color:red" @click="del(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </div>

      <!-- 新增/编辑消费对话框 -->
      <el-dialog :title="edit_or_add" :visible.sync="dialogVisible" width="400px">
        <div class="dialog_item">
          <span>分类</span>
          <el-select v-model="options_value" style="width:300px" placeholder="请选择分类">
            <el-option v-for="item in ConsumeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="dialog_item">
          <span>名称</span>
          <el-input v-model="addName" style="width:300px" placeholder="请填写名称"></el-input>
        </div>
        <div class="dialog_item">
          <span>价格</span>
          <el-input style="width:200px" type="text" placeholder="请填写价格" prefix-icon="el-icon-my-money" v-model="addPrice"
            onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))">
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addGetConsume">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { consume } from '@/api/consume'
export default {
  Name: 'ConsumptionSetting',
  data() {
    return {
      title: '新增消费项',
      dialogVisible: false,
      addName: '',//新增名
      addPrice: '',//新增价格
      options_value: '', //分类id

      edit_or_add: '',//对话框名
      edit_id: null,
      ConsumeOptions: [{//固定
        value: '1',
        label: '早餐消费'
      }, {
        value: '2',
        label: '客房消费'
      }, {
        value: '3',
        label: '赔偿'
      }, {
        value: '4',
        label: '其他'
      }, {
        value: '5',
        label: '佣金'
      },
      {
        value: '6',
        label: '支出'
      }
      ],
      /* 消费项数据 */
      tableData: [],
    }
  },
  created() {
    this.GetConsumeList()
  },
  methods: {
    // 删除按钮
    async del(value) {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        id: value.id,
      }
      await consume(data, 'DELETE').then(res => {
        console.log(res.data);
        if (res.data.message == '删除成功') {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.GetConsumeList()
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      })
    },
    // switch按钮
    async status(value) {
      console.log(value);
      let Boolean_data
      if (value.status == true) {
        Boolean_data = true
      } else if (value.status == false) {
        Boolean_data = false
      }
      let data2 = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        id: value.id,
        status: Boolean_data,
      }
      await consume(data2, 'PUT').then(res => {
        if (res.data.message == "编辑成功") {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.dialogVisible = false
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      })
    },
    /* 获取消费项列表 */
    async GetConsumeList() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id')
      }
      await consume(data, 'GET').then(res => {
        this.tableData = res.data.data.list
        this.total_nav = Math.ceil(res.data.data.total / 10)
        console.log(res.data.data);
      })
    },

    // 打开新增消费项对话框
    open_dialogVisible() {
      this.dialogVisible = true
      this.edit_or_add = '新增消费项'
      this.addPrice = ''
      this.addName = ''
      this.options_value = ''
    },
    // 修改消费项
    edit(value) {
      console.log(value, '修改消费项');
      this.edit_id = value.id
      this.edit_or_add = '修改消费项'
      this.dialogVisible = true
      this.addName = value.name
      this.addPrice = value.price
      this.options_value = `${value.type_id}`
    },

    // 编辑钟点房
    openDialog() {
      this.title = '编辑钟点房'
      this.dialogVisible = true
    },
    /* 新增消费项接口 */
    async addGetConsume() {
      let method
      if (this.edit_or_add == '新增消费项') {
        method = 'POST'
      } else if (this.edit_or_add == '修改消费项') [
        method = 'PUT'

      ]
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        type_id: this.options_value,
        name: this.addName,
        id: this.edit_id,
        price: this.addPrice,
      }
      console.log("data", data);
      await consume(data, method).then(res => {
        if (res.data.message == "添加成功") {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.addName = '',
            this.addPrice = '',
            this.dialogVisible = false
        } else if (res.data.message == "编辑成功") {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.addName = '',
            this.addPrice = '',
            this.dialogVisible = false
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      })
      this.GetConsumeList()
    },


    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .overflow-auto {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    position: absolute;

    .table_body {
      padding: 20px;
      width: calc(100% - 190px);

      .top_btn {
        float: right;
        margin-bottom: 20px;
      }


    }
  }
}

.dialog_item {
  padding-bottom: 20px;

  span {
    margin-right: 20px;
  }
}

::v-deep .el-icon-my-money {
  background: url("../../../../assets/images/￥.png") center center no-repeat;
  background-size: 12px;
}
</style>